<template>
  <div class="cart">
    <navbar class="navbar">
      <div slot="cente">购物车({{ cartlength }})</div>
    </navbar>
    <cartlist></cartlist>
    <cartbottonbar></cartbottonbar>
  </div>
</template>

<script>
import navbar from "components/common/navbar/navbar";
import cartbottonbar from "./childcomps/cartbottonbar.vue";

import cartlist from "./childcomps/cartilst.vue";
export default {
  name: "cart",
  components: {
    navbar,
    cartlist,
    cartbottonbar,
  },
  computed: {
    cartlength() {
      return this.$store.state.cartlist.length;
    },
  },
};
</script>

<style scoped>
.cart {
  height: 100vh;
}
.navbar {
  background-color: cornflowerblue;
  color: #fff;
}
</style>